<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/-->
<!DOCTYPE html>
<html lang="en">
<head>

    <title>验证码登录</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Pet Adoption Form  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //custom-theme -->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <link href="../css/style1.css" rel="stylesheet" type="text/css" media="all" />
    <link href="//fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800&amp;subset=latin-ext" rel="stylesheet">
</head>

<style>
    .register { padding: 8px 6px; font-size: 14px;}
    .res-item {position: relative;  width: 100%; border-radius: 4px; margin-bottom: 8px;background-color: #fff; }
    .res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
    .res-item .input-item {display: inline-block;width: 100%;padding-left: 31px;height: 40px;border: none; font-size: inherit;}
    .res-item .input-item:focus {
        outline-offset: 0;
        outline: -webkit-focus-ring-color auto -2px;
        background-color: #fefffe;
        border: 1px solid #e21945;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,.3);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,0.3);
    }
    .res-item .input-item:focus + .res-icon { color: #e21945; }
    .yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100;  display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #e21945;color: #fff;border-radius: 8px; }
    .yanzhengma:disabled { background-color: #ddd; }
</style>
<script>
    var times = 30;
    function roof(){
        if(times == 0){
            $('.yanzhengma').text('发送验证码('+times+'s)');
            $('.yanzhengma').text('发送验证码');
            times = 30;
            return
        }
        $('.yanzhengma').text('发送验证码('+times+'s)');
        times--;
        setTimeout(roof,1000);
    }
    function yzm() {
        var phone = $("#phone").val();
        if(phone==""||phone==null){
            alert("请输入手机号!");
            return;
        }
        roof();
        $.ajax({
            url:'/users/send/'+phone,
            success:function (result) {
                if(result=="发送成功!"){
                    alert("验证码已发送至"+phone+",请注意查收!");
                }else if(result=="已存在!"){
                    alert("你的验证码仍在有效期，请在有效期内进行验证!");
                }else{
                    alert("验证码发送失败，请稍后再试!")
                }
            }
        })
    }
    function login() {
        var phone = $("#phone").val();
        if(phone==""||phone==null){
            alert("请填写手机号码进行验证！");
            return;
        }
        var code = $("#phoneYzm").val();
        if(code==""||code==null){
            alert("请填写验证码!");
            return;
        }
        $.ajax({
            url:'/users/yzmlogin',
            data:{"phone":phone,"code":code},
            success:function (result) {
                if(result=="验证通过"){
                    alert("登录成功...");
                    window.location.href = "index.html";
                }else if(result=="验证码不存在或者过期"){
                    alert("验证码不存在或者过期...");
                }else{
                    alert("验证码错误...")
                }
            }
        })
    }
</script>
<body class="agileits_w3layouts">
<h1 class="agile_head text-center" style="padding-left: 430px">铛铛宠物店</h1>
<div class="w3layouts_main wrap">
    <h2>账号登录</h2>
    <form class="agile_form">
        <div class="icon1 w3ls-name1" style="width: 320px;margin-left: 100px">
            <input  placeholder="请输入手机号" id="phone" name="phone" type="text" required="">
        </div><br><br><br><br>
        <div class="res-item">
            <input type="text" id="phoneYzm" placeholder="验证码" style="width: 300px;margin-left: 100px">
            <i class="res-icon am-icon-mobile"></i>
            <button type="button" class="yanzhengma" onclick="yzm()" style="margin-right: 140px;margin-top: 2px">发送验证码</button>
        </div>
        <div class="clear"></div>
        <div style="padding-top: 30px;margin-left: 120px"><input name="sub" value="submit" type="button" onclick="login()"/><span style="padding-left: 100px"><a href="login.html" style="color: red">账密登录</a></span></div>
    </form>
</div>
<div class="clear"></div>
</body>
</html>